<template>
  <view class="withdrawal">
    <intake-nav-bar title="当前积分" dark :fixed="true" color="#fff" />
    <view>
      <view class="d_score border-r20">
        <view class="guarantee flexs flex-c flexs-ver w-100">
          <img :src="anPic" alt="">
          <text>积分安全有保障</text>
        </view>
        <view class="score_sc ac h305">
          <view class="score_cut fs33 padding40">当前积分</view>
          <view class="score_sum fs40 ">{{ user_integral }}</view>
        </view>
        <view class="score_but ">
          <view class="score_rec">
            <view class=" score_recharge border-r40 ">充值</view>
            <view class=" score_withdrawal border-r40 " @click="userTake">提现</view>
          </view>
        </view>
      </view>
      <view class="extra-log">
        <view class="extract-log">
          <!--          <scroll-view style="height: 100%"  scroll-y="true" class="scroll-Y"  @scrolltolower="getExtractList" v-else>-->
          <!-- <view class="items" :key="key" v-for="(item, key) in score_list">
              <view class="item-img" >
                <image :src="item.type == 1 ? czPic : txPic"></image>
              </view>
              <view class="item-content flex">
                <view class="item-content-t flex" >
                    <view  class="px-fs16">
                    <text style="color: #212b3d;">{{item.title}}</text>
                    </view>
                    <view  class="px-fs16" style="color: #222b3d;">
                      <text class="fs20">{{item.created_time}}</text>
                    </view>
                  </view>
                  <view class="item-content-b flex w200"  >
                    <view> <view> {{item.type == 1 ? "+" : '' }}{{item.score}}</view></view>
                    <view style="color:#ff5f0f;"><view >剩余 {{item.balance}}</view>
                  </view>
                </view>
              </view>
            </view> -->
          <!-- <view class='loadingicon acea-row row-center-wrapper' v-if="score_list.length>0">
            <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
          </view> -->
          <view class="no-thing" v-if="score_list.length == 0">
            <emptyPage title="暂无记录哦"></emptyPage>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import {
  mapGetters,
  mapMutations
} from 'vuex';
import emptyPage from '@/components/emptyPage.vue';
import selectBank from '@/components/selectBank.vue';
import { userScoreTake, getScoreLists, userScoreUsable, getBankList } from '@/api/user/userScore'
import { getExtractLists } from '@/api/user/extract'
import { getUserInfo } from "@/api/user";
export default {
  data() {
    return {
      anPic: '',
      czPic: this.$common.imgUrl() + '/images/score/czs@2x.png',
      txPic: this.$common.imgUrl() + '/images/score/txs@2x.png',
      score_sum: 0,
      price: '',
      loadingType: '', //加载更多status
      page: 1,
      user_integral: 0,
      userInfo: {},
      score_list: [],
      loadend: false,
      loading: false,
      loadTitle: '加载更多',
      scrollTop: 0,
      old: {
        scrollTop: 0
      },
      scrollTopShow: false,
      bankList: [],
    }
  },
  onReachBottom: function () {
    this.getIntegralList();
  },
  computed: {
    ...mapGetters(['userSelectBankInfo']),
  },
  components: {
    emptyPage,
    uniLoadMore,
    selectBank
  },
  mounted() {
  },
  async onLoad(query) {
    await this.getUserInfo();
    await this.getIntegralList();
    await this.getBankLists();
  },
  async onShow() {
  },
  watch: {
  },
  methods: {
    // 银行卡列表
    getBankLists() {
      getBankList().then(res => {
        this.bankList = res.data
      })
    },
    getUserInfo() {
      let that = this;
      getUserInfo().then(res => {
        that.$set(that, 'userInfo', res.data);
        that.user_integral = res.data.integral ?? 0
      })
    },
    async getIntegralList() {
      let that = this;
      if (that.loadingType === "noMore") {
        //防止重复加载
        return;
      }
      getExtractLists({ page: that.page++ }).then(res => {
        let data = res.data.data
        that.score_list = [...that.score_list, ...data];
        // that.score_list = [{title:'提现',score:12,balance:55,created_time:'2025-12-02'},{title:'提现',score:12,balance:55,created_time:'2025-12-02'}]
        let per_page = res.data.per_page
        let count = res.data.data.length
        if (count < per_page) {
          that.loadTitle = "已加载全部";
          that.loadingType = "noMore"
        } else {
          that.loadingType = "more"
        }
      })
    },
    scroll(e) {
      console.log("this.e ", e)
      this.scrollTopShow = e.detail.scrollTop > 150
      this.old.scrollTop = e.detail.scrollTop
      console.log("this.scrollTopShow ", this.scrollTopShow)
    },

    back() {
      uni.navigateBack({
        delta: 1
      })
    },
    calculateHeights() {
      uni.getSystemInfo({
        success: (res) => {
          const windowHeight = res.windowHeight;
          // 假设头部高度固定为某个值，或者根据设计稿动态计算
          this.headerHeight = 50; // 示例值，实际应根据设计稿确定
          // 内容区域高度 = 屏幕高度 - 头部高度 - 其他必要的高度（如padding、margin等）
          this.contentHeight = windowHeight - this.headerHeight - 20; // 示例中的20为其他必要高度
        },
      });
    },
    validateAll() {
      if (this.$common._empty(this.userSelectBankInfo)) {
        this.$utils.showToast('请选择银行卡');
        return false;
      }

      if (this.price <= 0) {
        this.$utils.showToast('最小输入数量为1');
        return false;
      }
      return true;
    },


    userTake() {
      if (this.bankList.length > 0) {
        this.$common.navTo('/pages/users_purchasing/user_payment/index');
      } else {
        this.$utils.showToast('暂无银行卡，立即认证绑定！');
        this.$common.navTo('/pages/users_purchasing/user_bank/step1');
      }
    },
    ...mapMutations(['setBankInfo']),
    selectEvent(data) {
      this.setBankInfo(data);
    },
    async getUserBankList() {
      userBankList().then(res => {

        if (!this.$common._empty(this.userSelectBankInfo)) {
          res.data.forEach(i => {
            if (i.id == this.userSelectBankInfo.bank_info.id) {
              i.default = true;
            }
          })
        }
        this.userBankList = res.data;
      })
    },
    async getUserScoreUsable() {
      userScoreUsable().then(res => {
        this.placeholderPrice = res.data.score;
      })
    },
    openDialog() {
      // await this.getUserBankList();
      this.$refs.selectBank.open();
    },
    allClick() {
      this.price = this.placeholderPrice;
    },
    inputEvent(e) {
      if (e.detail.value > this.placeholderPrice) {

        // console.log(e.detail.value,this.placeholderPrice);

        this.$set(this, 'price', JSON.parse(JSON.stringify(this.placeholderPrice))).toFixed(2);
      }
    },
  }
}
</script>

<style lang="scss">
.withdrawal {
  width: 100%;
  height: 100vh;
  background: url($baseUrl + '/images/bg.png') no-repeat center / 100% 100%;

  .d_score {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 保证内部元素在水平方向上居中 */
    background-color: #fff;
    height: 496rpx;
    margin: 20rpx;

    .guarantee {
      padding: 12rpx 0;
      flex-direction: column;
      align-items: center;
      margin-bottom: 20px;
      /* 与下方的log列表保持一定间距 */

      background-color: #00cfff;
      color: #fff;
      text-align: center;
      border-radius: 8px 8px 0 0;

      // height: 50rpx;
      img {
        height: 35rpx;
        width: 30rpx;
        margin: 0 5rpx;
        vertical-align: bottom;
      }
    }

    .score_sc {
      .score_cut {
        color: #49515f;
      }

      .score_sum {
        color: #212b3d;
      }
    }

    .score_but {
      display: flex;
      justify-content: center;
      /* 保证内部元素在水平方向上居中 */
      margin-top: 20px;

      /* 与上方的score_sc保持一定间距 */
      .score_rec {
        margin-bottom: 30rpx;
        display: flex;
        gap: 20px;

        /* 子元素之间的间距 */
        .score_recharge,
        .score_withdrawal {
          padding: 10px 20px;
          border: 1px solid #ddd;
          /* 边框样式，可根据实际情况调整 */
          text-align: center;
          /* 文字居中 */
          width: 308rpx;
          border: solid #e4e4e4 1rpx;
        }

        .score_recharge {
          color: #86909c;
          background-color: #fff;
        }

        .score_withdrawal {
          color: #fff;
          background-color: #0851fd;
        }
      }
    }
  }

  .extra-log {
    padding: 0 20rpx;

    .extract-log {

      // border: dashed #acadad;
      .items {
        display: flex;
        background: #fff;
        padding: 11rpx;

        .item-img {
          //border: solid;
          margin: 25rpx;
          width: 100rpx;
          height: 100rpx;

          image {
            border-radius: 8rpx;
            width: 90rpx;
            height: 90rpx;
          }
        }

        .item-content {
          //border: solid;
          // border-bottom: dashed #acadad 1px;
          padding: 5rpx 30rpx 0 0;
          margin-left: 16rpx;
          width: 580rpx;
          height: 125rpx;
          background: white;
          justify-content: space-between;

          .item-content-t,
          .item-content-b {
            flex-direction: column;
            justify-content: space-between;
            height: 86rpx;
            margin-top: 20rpx;
          }

          .item-content-t {}

          .item-content-b {
            align-items: flex-end;
          }
        }
      }
    }
  }

}
</style>
